import { Tabs } from 'expo-router';
import React from 'react';
import { Image, Platform, StyleSheet } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  // 定义图标映射
  const icons = {
    home:{
      normal:require('../../assets/icons/home.png'),
      active:require('../../assets/icons/home-active.png')
    },
    startboo:{
      normal:require('../../assets/icons/startboo.png'),
      active:require('../../assets/icons/startboo-active.png')
    },
    show:{
      normal:require('../../assets/icons/show.png'),
      active:require('../../assets/icons/show-active.png')
    },
    mall:{
      normal:require('../../assets/icons/mall.png'),
      active:require('../../assets/icons/mall-active.png')
    },
    my:{
      normal:require('../../assets/icons/my.png'),
      active:require('../../assets/icons/my-active.png')
    }
  }

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        // tabBarStyle: Platform.select({
        //   // ios: {
        //   //   // Use a transparent background on iOS to show the blur effect
        //   //   position: 'absolute',
            
        //   // },
        //   default: {},
        // }),
        tabBarStyle:{
          height:60,
        }
      }}>
      <Tabs.Screen name='index'
      options={{
        title:'首页',
        tabBarIcon:({focused})=>(<Image source={focused?icons.home.active : icons.home.normal} style={styles.icon} resizeMode='contain'/>)
      }}/>
      <Tabs.Screen
        name="startboo"
        options={{
          title: '星球',
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? icons.startboo.active : icons.startboo.normal}
              style={styles.icon}
              resizeMode="contain"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="show"
        options={{
          title: 'Show',
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? icons.show.active : icons.show.normal}
              style={styles.icon}
              resizeMode="contain"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="mall"
        options={{
          title: '附近的店',
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? icons.mall.active : icons.mall.normal}
              style={styles.icon}
              resizeMode="contain"
            />
          ),
        }}
      />
      <Tabs.Screen
        name="my"
        options={{
          title: '我的',
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? icons.my.active : icons.my.normal}
              style={styles.icon}
              resizeMode="contain"
            />
          ),
        }}
      />
        {/*  
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
        }}
      />
      */}

    </Tabs>
  );
}

const styles = StyleSheet.create({
  icon:{
    width:24,height:24
  }
})
